<template>
  <div>
    <div class="classify-head">
      <div class="head-back" @click="handleBack()">返回</div>
      <div class="head-title">{{ $route.query.title }}</div>
      <div class="icon-class"><i class="iconfont icon-fenleishouye"></i></div>
    </div>
    <div class="head-sort1" v-if="gear.some(item => item.title === $route.query.title)">
      <ul class="sort-subtitle">
        <li :class="nowSortTitle === item.title?'onActive':''" v-for="item in gear" :key="item.gearId" @click="handlehead(item.gearId);handleActive(item.title)">{{ item.title }}</li>
      </ul>
    </div>
    <div class="head-sort2" v-else>
      <ul class="sort-subtitle">
        <li :class="nowSortTitle === item.title?'onActive':''" v-for="item in household" :key="item.houseId" @click="handlehead(item.houseId);handleActive(item.title)">{{ item.title }}</li>
      </ul>
    </div>
    <ul class="classify-sort">
      <li v-for="(item,index) in mysort" :key="index" @click="handleRender(item.sortway);handleSort(index)">
        <a href="javascript:;" :class="nowIndex===index?'sortActive':''">{{ item.sortname }}</a>
      </li>
    </ul>
    <div class="sort-goods">
      <ul class="single-sort">
        <li :key="item.productId" v-for="item in sortGoods" @click="handleDetail(item.productId,item)">
          <img :src="item.productImg" alt="">
          <p class="sort-title">{{ item.productTitle }}</p>
          <div class="sort-price">
            <span>￥{{ item.sellPrice }}</span>
            <span>￥{{ item.originalPrice }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="no-more">
      没有更多了
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapMutations, mapState } from 'vuex'
export default {
  data () {
    return {
      nowIndex: 0,
      mysort: [
        { sortname: '上新', sortway: 'onShelfTime' },
        { sortname: '销量', sortway: 'sales' },
        { sortname: '价格', sortway: 'price' }
      ],
      sortGoods: [],
      nowSortTitle: '',
      currentPage: 1
    }
  },
  computed: {
    ...mapState('category', ['gear', 'household'])
  },
  mounted () {
    this.hide()
    this.nowSortTitle = this.$route.query.title
    console.log(this.$route.query.categoryId, this.$route.query.title)
    axios.get(`/pages/category/${this.$route.query.categoryId}?currentPage=1&sort=onShelfTime&order=desc&_=1583497136786`).then(res => {
      this.sortGoods = res.data.data
    })
    window.onscroll = () => {
      if ((document.documentElement.scrollTop + document.documentElement.clientHeight) === document.documentElement.scrollHeight) {
        this.currentPage++
        axios.get(`/pages/category/${this.$route.query.categoryId}?currentPage=${this.currentPage}&sort=onShelfTime&order=desc&_=1583497136786`).then(res => {
          this.sortGoods = [...this.sortGoods, ...res.data.data]
        })
      }
    }
  },
  methods: {
    ...mapMutations('tabbar', ['hide', 'show']),
    handleSort (index) {
      this.nowIndex = index
    },
    handleRender (ways) {
      axios.get(`/pages/category/${this.$route.query.categoryId}?currentPage=1&sort=${ways}&order=desc&_=1583497136786`).then(res => {
        this.sortGoods = res.data.data
      })
      window.onscroll = () => {
        if ((document.documentElement.scrollTop + document.documentElement.clientHeight) === document.documentElement.scrollHeight) {
          this.currentPage++
          axios.get(`/pages/category/${this.$route.query.categoryId}?currentPage=${this.currentPage}&sort=${ways}&order=desc&_=1583497136786`).then(res => {
            this.sortGoods = [...this.sortGoods, ...res.data.data]
          })
        }
      }
    },
    handleDetail (goodsId, goods) {
      localStorage.setItem('goods', JSON.stringify(goods))
      this.$router.push(`/detail/${goodsId}`)
    },
    handlehead (gearId) {
      axios.get(`/pages/category/${gearId}?currentPage=1&sort=onShelfTime&order=desc&_=1583497136786`).then(res => {
        this.sortGoods = res.data.data
      })
      window.onscroll = () => {
        if ((document.documentElement.scrollTop + document.documentElement.clientHeight) === document.documentElement.scrollHeight) {
          this.currentPage++
          axios.get(`/pages/category/${gearId}?currentPage=${this.currentPage}&sort=onShelfTime&order=desc&_=1583497136786`).then(res => {
            this.sortGoods = [...this.sortGoods, ...res.data.data]
          })
        }
      }
    },
    handleActive (title) {
      this.nowSortTitle = title
    },
    handleBack () {
      this.$router.back()
    }
  },
  destroyed () {
    this.show()
    window.onscroll = null
  }
}
</script>

<style lang="scss" scoped>
img{
  width:100%
}
.classify-head{
  display: flex;
  height: 50px;
  background: white;
  align-items: center;
  padding: 0px 15px;
  div{
    flex: 1;
    text-align: center;
  }
  .head-back{
    text-align: left;
  }
  .head-title{
    font-weight: bold;
    font-size: 20px;
  }
  .icon-class{
    text-align: right;
    .iconfont{
      font-size: 24px;
    }
  }
}
.head-sort1{
  background: url(https://img.wowdsgn.com/category/background/10.jpg?imageslim) no-repeat left center;
  padding: 15px 0px;
  overflow: auto;
  .sort-subtitle{
    display: flex;
    li {
      flex-shrink: 0;
      box-sizing: border-box;
      width: 85px;
      height: 85px;
      border: 1px solid rgba($color: #fff, $alpha: 0.2);
      margin-left: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 14px;
    }
  }
}
.head-sort2{
  background: url(https://img.wowdsgn.com/category/images/a9934c0a-af96-4677-ba7c-b64af2c57439_2dimension_1125x330.jpg?imageslim) no-repeat left center;
  padding: 15px 0px;
  overflow: auto;
  .sort-subtitle{
    display: flex;
    li {
      flex-shrink: 0;
      box-sizing: border-box;
      width: 85px;
      height: 85px;
      border: 1px solid rgba($color: #fff, $alpha: 0.2);
      margin-left: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 14px;
    }
  }
}
.onActive {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 1)
}
.classify-sort{
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 10px 0px;
  li{
    flex: 1;
    text-align: center;
    font-size: 14px;
    a{
      text-decoration: none;
      padding: 10px;
      color: gray;
    }
  }
}
.sortActive {
  border-bottom: 2px solid black;
  color: black!important;
}
.sort-goods{
  .single-sort{
    display: flex;
    flex-wrap: wrap;
    li:nth-child(2n-1){
      border-right: 1px solid #f0f0f0;
    }
    li{
      padding: 15px 15px 30px;
      box-sizing: border-box;
      width: 50%;
      border-bottom: 1px solid #f0f0f0;
      .sort-title{
        font-size: 14px;
        color: gray;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .sort-price{
        span:nth-child(1){
          font-size: 14px;
        }
        span:nth-child(2){
          font-size: 12px;
          color: gray;
          text-decoration: line-through;
          margin-left:5px;
        }
      }
    }
  }
}
.no-more{
  font-size: 14px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  padding:15px 0px;
  margin-bottom: 70px;
}
</style>
